<template>
	<view class="outsize">
		<view style="background-color: #ffffff;border-radius: 8px;">
			<u-cell-group border="false">
				<u-cell title="修改昵称">
					<template #value>
						<!-- <u-input inputAlign='right' placeholder='请输入您新的昵称' border='none'
							v-model="tableContent.userName"></u-input> -->
						<input type="nickname" class="weui-input" placeholder="请输入您新的昵称" style="text-align: right;"
							v-model="tableContent.userName" />
					</template>
				</u-cell>
				<u-cell title="修改头像">
					<template #value>
						<view class="">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="1"></u-upload>
						</view>
					</template>
				</u-cell>
				<u-cell title="电话号码">
					<template #value>
						<u-input inputAlign='right' placeholder='请输入您手机号码' border='none'
							v-model="tableContent.phonenumber"></u-input>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
		<view style="position: absolute;bottom: 100px;width: calc(100vw - 10px);"
			v-if="tableContent.phonenumber!==''||tableContent.avatar!==''||tableContent.userName!==''">
			<button class="state" @click="sures">确认修改</button>
		</view>
		<view style="position: absolute;bottom: 100px;width: calc(100vw - 10px);" v-else>
			<button class="state" @click="tuichu">退出登录</button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		urlHead
	} from "@/serve/serve.js" // 全局配置文件
	import {
		post
	} from '@/serve/method.js'
	const tableContent = reactive({
		phonenumber: '',
		avatar: '',
		userName: '',
	})
	const tuichu = () => {
		uni.removeStorage({
			key: 'lifeData',
			success: function(res) {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		});
	}
	// 头像面
	const fileList1 = ref([])
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	}
	const action = ref(urlHead + '/common/upload')
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			console.log(lists[i].url, 7777)
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
			tableContent.avatar = fileList1.value[0].url
			console.log(fileList1.value, '图片总')
		}
	}
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: action.value,
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					console.log(JSON.parse(res.data).url, '图片')
					setTimeout(() => {
						resolve(JSON.parse(res.data).url);
					}, 1000);
				},
			});
		});
	}
	const sures = () => {
		uni.getStorage({
			key: 'lifeData',
			success: function(res) {
				let url = '/api/user/reset'
				post(url, {
					userId: res.data.vuex_user.userId,
					phonenumber: tableContent.phonenumber,
					avatar: tableContent.avatar,
					userName: tableContent.userName,
				}).then((res) => {
					if (res.code == 0) {
						uni.showModal({
							title: '提示',
							content: '修改成功',
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
					}
				})

			},
			fail: function(res) {
				if (res.errMsg == 'getStorage:fail data not found') {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}
			}
		})

	}
</script>

<style scoped>
	.outsize {
		width: calc(100vw - 10px);
		height: calc(100vh - 20px);
		background-color: #F2F2F2;
		padding: 10px 5px;
		position: relative;
	}

	.state {
		font-size: 14px;
		background-color: #FFDA00;
	}
</style>